<template>
  <div class="app-container">

    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="queryForm.keywords" placeholder="请输入关键字" style="width: 18.75rem;" />
      </el-form-item>
      <el-form-item label="操作用户">
        <el-input v-model="queryForm.username" placeholder="请输入操作用户名" style="width: 18.75rem;" />
      </el-form-item>
      <el-form-item label="操作时间">
        <el-date-picker
          v-model="queryForm.datetimerange"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd hh:mm"
          value-format="yyyy-MM-dd hh:mm"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="操作IP">
        <el-input v-model="queryForm.remoteIP" placeholder="请输入登录IP" style="width: 18.75rem;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  size="mini" :loading="loading" @click="onQuerySubmit">查询</el-button>
        <el-button type="info" icon="el-icon-refresh"  size="mini" :loading="loading" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

  <el-table
    :data="tableData"
    border
    empty-text="暂无数据."
    border
    style="width: 100%">

    <el-table-column
      prop="title"
      label="日志标题"
      width="180">
    </el-table-column>

    <el-table-column
      prop="requestUri"
      label="请求URI"
      width="180">
    </el-table-column>

    <el-table-column
      prop="method"
      label="请求方式"
      align="center"
      width="80">
    </el-table-column>

    <el-table-column prop="responseCode" label="响应码" width="80" align="center">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.responseCode='200' " type="success">{{scope.row.responseCode}}</el-tag>
        <el-tag v-else type="danger">{{scope.row.responseCode}}</el-tag>
      </template>
    </el-table-column>

    <el-table-column
      prop="responseMessage"
      label="响应信息">
    </el-table-column>

    <el-table-column prop="time" label="响应时间" width="80" align="center">
      <template slot-scope="scope">
        <span>{{scope.row.time}} ms</span>
      </template>
    </el-table-column>

    </el-table-column>
    <el-table-column
      prop="createBy"
      label="操作用户"
      width="180">
    </el-table-column>
    <el-table-column
      prop="remoteIp"
      label="操作IP"
      width="180">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="操作时间">
    </el-table-column>

    <el-table-column label="操作" align="left" fixed="right" >
      <template slot-scope="scope">
        <el-button type="text" icon="el-icon-view" size="small" @click="handleView(scope.row)">详情</el-button>
      </template>
    </el-table-column>


  </el-table>

  <el-row>
    <el-col :span="24">
      <div align="right" style="margin-top: 0.3125rem;">
        <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit" :total="page.total" @current-change="handleCurrentChange" />
      </div>
    </el-col>
  </el-row>


  <ViewOperaDialog
   v-if="viewDialog.visible"
   :properties="viewDialog"
   @closed="close"
  >

  </ViewOperaDialog>


  </div>
</template>

<script>

  import {
    findLogList,
    getLogById
  } from '@/api/system/log'

  import ViewOperaDialog from '../components/ViewOperaDialog.vue'

  export default {
    name:'OperaLog',
    components: {
      ViewOperaDialog
    },
    data() {
      return {
        loading:false,
        viewDialog:{
          visible:false,
          data:{}
        },
        queryForm:{
          username:'',
          keywords:'',
          datetimerange:'',
          remoteIP:''
        },
        page: {
          cur: 1,
          limit: 10,
          total: 0
        },
        tableData: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        tableData: []
      }
    },
    created() {
      this.load();
    },
    methods:{
      indexMethod(index) {
        return index +1;
      },
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.username='';
        this.queryForm.datetimerange='';
        this.queryForm.remoteIP='';
        this.load()
      },
      load(){
        this.loading=true
        findLogList({
          cur: this.page.cur,
          limit: this.page.limit,
          usernname: this.queryForm.username,
          remoteIp: this.queryForm.remoteIP,
          datetimerange: this.queryForm.datetimerange? this.queryForm.datetimerange.join():'',
          keywords: this.queryForm.keywords,
          type: '1'
        }).then(rsp => {
          if(200==rsp.code){
            const _data = rsp.data.list
            this.page.total = rsp.data.totalRow
            this.tableData = _data
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleView(row){
        this.viewDialog.visible=true;
        this.viewDialog.data=row;
      },
      close(e){
        this.viewDialog.visible = e
        this.viewDialog.data = {}
      }
    }
  }
</script>
